<template>
	<view class="main">
		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-form-item prop="safety_code">
					<u-input v-model="form.safety_code" type="password" :placeholder="type?'请设置交易密码':'请输入当前交易密码'"/>
				</u-form-item>
				<u-form-item prop="safecode" v-if="type==2">
					<u-input v-model="form.safecode" type="password" placeholder="请设置新的交易密码"/>
				</u-form-item>
				<u-form-item prop="resafecode">
					<u-input v-model="form.resafecode" type="password" placeholder="请确认交易密码"/>
				</u-form-item>
				<u-form-item prop="tel">
					<u-input v-model="form.tel" disabled="" type="number" placeholder="请输入手机号码"/>
				</u-form-item>
				<u-form-item prop="code">
					<view class="code">
						<u-input v-model="form.code" placeholder="请输入验证码" />
						<view class="seconds">
							<u-button size="mini" @click="getCode">{{codeText}}</u-button>
							<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
						</view>
					</view>
				</u-form-item>
			</u-form>
			<tfgg-verify @result='verifyResult' ref="verifyElement"></tfgg-verify>
			<view class="submit">
				<u-button :loading="loading" @click="submit">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import tfggVerify from "@/components/tfgg-verify/tfgg-verify.vue";
	export default {
		components: {
			"tfgg-verify":tfggVerify
		},
		data() {
			return {
				type:'',
				codeText: '获取验证码',//获取验证码
				loading:false,
				form: {
					tel: '',
					code: '',
					safety_code:'',//设置新的密码
					safecode:'',//设置新的密码-修改密码用
					resafecode:'',//确认密码
				},
				rules: {
					safety_code: [
						{ 
							required: true, 
							message: '请设置交易密码', 
							trigger: ['change','blur'],
						}
					],
					safecode: [
						{ 
							required: false, 
							message: '请设置新的交易密码', 
							trigger: ['change','blur'],
						}
					],
					resafecode: [
						{ 
							required: true, 
							message: '请确认交易密码', 
							trigger: ['change','blur'],
						},{
							validator: (rule, value, callback) => {
								if(value != (this.type==1?this.form.safety_code:this.form.safecode))return false
								if(value == (this.type==1?this.form.safety_code:this.form.safecode))return true
							},
							message: '两次密码不一致',
							trigger: 'change'
						}
					],
					tel: [
						{ 
							required: true, 
							message: '请输入手机号', 
							trigger: ['change','blur'],
						}
					],
					code: [
						{
							required: true,
							message: '请输入验证码', 
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		onLoad(e) {
			console.log('当前路由参数',e)
			try {
			    const userInfo = uni.getStorageSync('userInfo');
			    if (userInfo) {
					if(userInfo){
						this.form.tel = userInfo.mobile
					}
			    }
			} catch (e) {
			    // error
			}
			this.type = e.type
			if(this.type==2){
				this.rules.safecode[0].required = true
				this.rules.safety_code[0].message='请输入当前交易密码'
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			verifyResult(res){
			    if(res){
			        this.$refs.verifyElement.reset();//校验成功重置插件
			        console.log('验证成功')
			    }
				this.sendMessage(this.form.tel)
			    console.log(res);
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						let data={
							mobile:this.form.tel,
							verify_code:this.form.code,
							safety_code:this.form.safety_code,
							resafecode:this.form.resafecode
						}
						if(this.type==2){
							data.safecode=this.form.safecode
						}
						this._submit(data)
					} else {
						console.log('验证失败');
					}
				});
			},
			_submit(e){
				this.loading = true
				this.$http({
					url:this.$api.setSafetyCode,
					method:'POST',
					hideLoading:true,
					data:e,
					success:res=>{
						console.log('登录接口返回----------',res.data.token)
						if(res.code==201){
							uni.showToast({
							    title:'保存成功',
							    duration: 2000,
								icon:'none'
							});
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}
					},
					fail:err=>{
						
					},complete:e=>{
						this.loading = false
						uni.hideLoading();
					}
				})
			},
			//获取验证码
			codeChange(text) {
				this.codeText = text
			},
			getCode() {
				if(!this.form.tel){
					this.$u.toast('手机号格式不正确');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// uni.showLoading({
					// 	title: '正在获取验证码'
					// })
					this.$refs.verifyElement.show();
					
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			// 发送验证码
			sendMessage(e){
				this.$http({
					url:this.$api.shayuSms,
					method:'POST',
					hideLoading:true,
					data:{
						mobile:e,
					},
					success:res=>{
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						console.log('短信验证码----------',res)
					},
					fail:err=>{
						
					},complete:e=>{
						uni.hideLoading();
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		.content{
			padding: 34rpx;
			/deep/.u-form-item{
				padding-top: 54rpx!important;
			}
			.code{
				width: 100%;
				display: flex;
				justify-content: space-between;
				button{
					font-size: 26rpx;
					font-family: $G-fm;
					font-weight: 400;
					color: #2F73FD;
					line-height: 36rpx;
				}
				/deep/.u-hairline-border:after{
					border: 0;
				}
			}
			.submit{
				margin-top: 96rpx;
				/deep/button{
					width: 686rpx;
					height: 80rpx;
					background: linear-gradient(135deg, #2F73FD 0%, #2F73FD 100%);
					box-shadow: 0px 4rpx 8rpx 0px #A6C4FF;
					border-radius: 45rpx;
					font-size: 32rpx;
					font-family: $G-fm;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 44rpx;
				}
				/deep/.u-hairline-border:after{
					border: 0;
				}
			}
			/deep/.u-form-item__message{
				position: absolute;
				right: 0;
				top:20rpx;
			}
		}
	}
</style>
